<template>
  <div class="group-cover">
    <el-image class="item-cover" :src="comCover" fit="cover">
      <div slot="error" class="image-slot">
        <div class="el-icon-picture">
          <h4>请添加头图</h4>
          <p class="tips">支持8MB内的JPG／JPEG／BMP／PNG格式的高清图片</p>
          <p class="tips">（建议大于960*540像素）</p>
        </div>
        <div class="item-mask" />
      </div>
    </el-image>
    <input class="item-uploader" size="medium " type="file" @change="uploadHandler">
  </div>
</template>

<script>
// utils
import { ossPutUpload } from '@/utils/upload_handler';
export default {
  props: {
    cover: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      newCover: ''
    };
  },
  computed: {
    comCover() {
      return this.newCover || this.cover;
    }
  },
  methods: {
    async uploadHandler(evt) {
      const [file] = evt.target.files;
      const res = await ossPutUpload({ file });
      this.newCover = res.url || res.res.requestUrls[0];
      this.$emit('change', res.url || res.res.requestUrls[0]);
    }
  }
};
</script>

<style lang="scss" >
.group-cover {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  &:hover {
    .item-mask {
      opacity: 1;
    }
  }
  .item-cover,
  .item-uploader,
  .item-mask,
  .image-slot {
    width: 100%;
    height: 240px;
  }
  .item-cover {
    border: 1px solid rgba($color: #000000, $alpha: 0.1);
    border-radius: 5px;
  }
  .item-uploader,
  .item-mask {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
  .item-mask {
    background-color: rgba($color: #000000, $alpha: 0.1);
    transition: opacity 0.3s;
  }
  .image-slot {
    background-color: #f8f8f8;
    .el-icon-picture {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #aaa;
      &::before {
        font-size: 40px;
      }
      p {
        font-size: 12px;
      }
    }
  }
}
</style>
